<template>
    <div class="search-container">
        <van-popup
            v-model="show"
            :close-on-click-overlay="false"
            position="top"
            :style="{ height: '60%' }" >
            <form action="/">
                <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
                />
            </form >
            
                 <!-- <i class="iconfont icon-trash"></i>
                <i class="iconfont icon-yanjing"></i>
                <i class="iconfont icon-guanbi-yanjing"></i> -->
            
             <div class="searchWrap">
                 <div class="card">
                     <div class="header"> 
                         <h3>搜索历史</h3>
                         <i @click="clearHistory" class="iconfont icon-trash"></i>
                     </div>
                     <div class="footer">
                         <span @click="searchData(item)" v-for="(item,index) in historyData" :key="index">{{item}}</span>
                     </div>

                 </div>
                 <van-divider />
                  <div class="card">
                     <div class="header">
                         <h3>热门搜索</h3>
                         <i @click="eyeOpen=!eyeOpen"
                         :class="['iconfont',eyeClass]"></i>
                     </div>
                     <div class="footer" v-if="eyeOpen">
                        <span @click="searchData(item)" v-for="(item,index) in hotsSearchData" :key="index">{{item}}</span>
                     </div>
                     <div class="text-center" v-else>已隐藏热门搜索</div>
                 </div>


             </div>
        </van-popup>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                value:"",
                show: true,
                eyeOpen: true,
                historyData: JSON.parse( localStorage.getItem('historyData') || '[]'),
                hotsSearchData:['iphone6','笔记本电脑','mac pro','小米','DVD'],

            }
        },
        computed:{
            eyeClass(){
                return this.eyeOpen ? 'icon-yanjing' : 'icon-guanbi-yanjing'
            }
        },
        methods:{
            async _fetchSearchData(value){
                if(!value){
                    this.$toast('请输入关键字');
                    return;
                }
                this.value = value;
                // 1.发送请求获取关键字查询
                if(!this.historyData.includes(value)){
                    this.historyData.unshift(this.value)
                    localStorage.setItem('historyData',JSON.stringify( this.historyData ))
                }
                // 把关键字带到搜索结果页面去搜索
                this.$router.push("/search-result/" + this.value)

            },
            onSearch(){
                this._fetchSearchData(this.value)
            },

            searchData(value){
                 this._fetchSearchData(value)
                 this.value = value;
            },
            onCancel(){
                this.$router.back();
            },
            clearHistory(){
                this.$dialog.confirm({
                    message: '确认清空？',
                    })
                    .then(() => {
                        // on confirm
                        this.historyData = [];
                        localStorage.removeItem('historyData')
                    })
                    .catch(() => {
                        // on cancel
                    });

            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-container {
        .searchWrap {
            .card {
                padding:6px;
                .header{
                    display:flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 4px;
                }

                .footer {
                    display:flex;
                    flex-wrap: wrap;

                    span {
                        height:30px;
                        line-height: 30px;
                        background: #f3f5f6;
                        font-size:14px;
                        margin-right: 6px;
                        padding:2px 4px;
                        text-align:center;
                        border-radius:6px;
                        margin: 4px;

                    }
                }
            }
        }
    }
</style>
